<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		/*method1
		.left {
	    float: left;
	    height: 200px;
	    width: 100px;
	    background-color: red;
		}
		.right {
		    width: 200px;
		    height: 200px;
		    background-color: blue;
		    float: right;
		}
		.main {
		    margin-left: 120px;
		    margin-right: 220px;
		    height: 200px;
		    background-color: green;
		}*/

/*双飞翼
.content {
  	    float: left;
  	    width: 100%;
        }
        .main {
  	    height: 200px;
  	    margin-left: 110px;
  	    margin-right: 220px;
  	    background-color: green;
        }
        //用于清除浮动
        .main::after {
  	    display: block;
  	    content: '';
  	    font-size: 0;
  	    height: 0;
  	    clear: both;
  	    zoom: 1;
        }
	.left {
	    float: left;
	    height: 200px;
	    width: 100px;
	    margin-left: -100%;
	    background-color: red;
	}
	.right {
	    width: 200px;
	    height: 200px;
	    float: right;
	    margin-left: -200px;
	    background-color: blue;
	}	
*/

/*圣杯
.container {
	    margin-left: 120px;
	    margin-right: 220px;
	}
	 .container::after {
  	    display: block;
  	    content: '';
  	    font-size: 0;
  	    height: 0;
  	    clear: both;
  	    zoom: 1;
        }
	.main {
	    float: left;
	    width: 100%;
	    height: 300px;
	    background-color: red;
	}
	.left {
	    float: left;
	    width: 100px;
	    height: 300px;
	    margin-left: -100%;
	    position: relative;
	    left: -120px;
	    background-color: blue;
	}
	.right {
	    float: left;
	    width: 200px;
	    height: 300px;
	    margin-left: -200px;
	    position: relative;
	    right: -220px;
	    background-color: green;
	}
*/

/*flex*/
.container {
            display: flex;
	}
	.main {
            /*flex-grow: 1;*/
            flex:1;
	    height: 300px;
	    background-color: red;
	}
	.left {
	    /*order: -1;
	    flex: 0 1 200px;
	    margin-right: 20px;
	    height: 300px;
	    background-color: blue;*/
	    width: 200px;
	    height: 200px;
	     background-color: blue;
	}
	.right {
	    /*flex: 0 1 100px;
            margin-left: 20px;
	    height: 300px;
	    background-color: green;*/
	    width: 200px;
	    height: 200px;
	    background-color: green;
	}
	
/*table
	 .container {
	    display: table;
	    width: 100%;
        }
        .left, .main, .right {
	    display: table-cell;
        }
        .left {
	    width: 200px;
	    height: 300px;
	    background-color: red;
        }
        .main {
	    background-color: blue;
        }
        .right {
	    width: 100px;
	    height: 300px;
	    background-color: green;
        }
   */  

   /*绝对定位
   .container {
	    position: relative;
	}
	.main {
	    height: 400px;
	    margin: 0 120px;
	    background-color: green;
	}
	.left {
	    position: absolute;
	    width: 100px;
	    height: 300px;
	    left: 0;
	    top: 0;
	    background-color: red;
	}
	.right {
	    position: absolute;
	    width: 100px;
	    height: 300px;
	    background-color: blue;
            right: 0;
	    top: 0;
	}
	*/  
	</style>
</head>
<body>
<!--method1
 	<div class="container">
        <div class="left"></div>

        <div class="right"></div>
        <div class="main"></div>
        
    </div>
   -->
<!--双飞翼
    <div class="content">
        <div class="main"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
   -->
<!--圣杯
    <div class="container">
		<div class="main"></div>
		<div class="left"></div>
		<div class="right"></div>
    </div>
   -->
   <!--flex-->
    <div class="container">
	
	<div class="left"></div>
	<div class="main"></div>
	<div class="right"></div>
    </div>
    
<!--table
    <div class="container">
	<div class="left"></div>
	<div class="main"></div>
	<div class="right"></div>
    </div>
   -->
   <!--绝对定位
   <div class="container">
        <div class="main"></div>
	<div class="left"></div>
	<div class="right"></div>
    </div>
    -->
</body>
</html>